<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>


    <meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Multiple Modules</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/calendar/assets/skins/sam/calendar.css" />
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/skins/sam/tabview.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/element/element-min.js"></script>
<script type="text/javascript" src="../../build/calendar/calendar-min.js"></script>
<script type="text/javascript" src="../../build/tabview/tabview-min.js"></script>
<script type="text/javascript" src="../../build/history/history-min.js"></script>

<!--there is no custom header content for this example-->

</head>

<body class="yui-skin-sam">


<h1>Multiple Modules</h1>

<div class="exampleIntro">
	<p>
  This example demonstrates how to use the Browser History Manager
  with several different modules. Working with several modules
  is not different from working with a single module. All the modules
  have to be registered separately, and each module has its own
  initial state and callback.
</p>
			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<style>

#yui-history-iframe {
  position:absolute;
  top:0; left:0;
  width:1px; height:1px; /* avoid scrollbars */
  visibility:hidden;
}

#demo { margin-bottom:1em; }

</style>

<!-- Static markup required by the browser history utility. Note that the
     iframe is only used on Internet Explorer. If this page is server
     generated (by a PHP script for example), it is a good idea to create
     the IFrame ONLY for Internet Explorer (use server side user agent sniffing) -->

<iframe id="yui-history-iframe" src="assets/blank.html"></iframe>
<input id="yui-history-field" type="hidden">

<!-- Static markup required for the TabView and calendar widgets. -->

<div id="demo" class="yui-navset yui-navset-top">
  <ul class="yui-nav">
    <li><a href="#tab1"><em>Tab One Label</em></a></li>
    <li title="active" class="selected"><a href="#tab2"><em>Tab Two Label</em></a></li>
    <li title="" class=""><a href="#tab3"><em>Tab Three Label</em></a></li>
  </ul>
  <div class="yui-content">
    <div style="display: none;" id="tab1"><p>Tab One Content</p></div>
    <div style="display: block;" id="tab2"><p>Tab Two Content</p></div>
    <div style="display: none;" id="tab3"><p>Tab Three Content</p></div>
  </div>
</div>

<div id="calendarContainer"></div>

<script>

(function () {

    // The initial month will be chosen in the following order:
    //
    // URL fragment identifier (it will be there if the user previously
    // bookmarked the application in a specific state)
    //
    //         or
    //
    // today's corresponding month (default)

    var today = new Date();
    var defaultCalendarState = (today.getMonth() + 1) + "_" + today.getFullYear();
    var bookmarkedCalendarState = YAHOO.util.History.getBookmarkedState("calendar");
    var initialCalendarState = bookmarkedCalendarState || defaultCalendarState;

    // The initially selected tab will be chosen in the following order:
    //
    // URL fragment identifier (it will be there if the user previously
    // bookmarked the application in a specific state)
    //
    //         or
    //
    // "tab0" (default)

    var bookmarkedTabViewState = YAHOO.util.History.getBookmarkedState("tabview");
    var initialTabViewState = bookmarkedTabViewState || "tab0";

    var calendar;
    var tabView;

    // Register our calendar module. Module registration MUST
    // take place before calling YAHOO.util.History.initialize.
    YAHOO.util.History.register("calendar", initialCalendarState, function (state) {
        // This is called after calling YAHOO.util.History.navigate, or after the user
        // has trigerred the back/forward button. We cannot discrminate between
        // these two situations.

        // Show the right month according to the "state" parameter:
        calendar.cfg.setProperty("pagedate", state.replace("_", "/"));
        calendar.render();
    });

    // Register our TabView module. Module registration MUST
    // take place before calling YAHOO.util.History.initialize.
    YAHOO.util.History.register("tabview", initialTabViewState, function (state) {
        // This is called after calling YAHOO.util.History.navigate, or after the user
        // has trigerred the back/forward button. We cannot discrminate between
        // these two situations.

        // "state" can be "tab0", "tab1" or "tab2".
        // Select the right tab:
        tabView.set("activeIndex", state.substr(3));
    });

    function handleCalendarBeforeRender () {
        var calDate, newState, currentState;

        calDate = calendar.cfg.getProperty("pageDate");
        newState = (calDate.getMonth() + 1) + "_" + calDate.getFullYear();

        try {
            currentState = YAHOO.util.History.getCurrentState("calendar");
            // The following test is crucial. Otherwise, we end up circling forever.
            // Indeed, YAHOO.util.History.navigate will call the module onStateChange
            // callback, which will call createCalendar, which will call calendar.render(),
            // which will end up calling handleCalendarBeforeRender, and it keeps going
            // from here...
            if (newState !== currentState) {
                YAHOO.util.History.navigate("calendar", newState);
            }
        } catch (e) {
            calendar.cfg.setProperty("pagedate", newState.replace("_", "/"));
            calendar.render();
        }
    }

    function initCalendar (startDate) {
        // Instantiate the calendar control...
        calendar = new YAHOO.widget.Calendar("calendar", "calendarContainer", startDate);
        calendar.beforeRenderEvent.subscribe(handleCalendarBeforeRender, calendar, true);
        calendar.render();
    }

    function handleTabViewActiveTabChange (e) {
        var newState, currentState;

        newState = "tab" + this.getTabIndex(e.newValue);

        try {
            currentState = YAHOO.util.History.getCurrentState("tabview");
            // The following test is crucial. Otherwise, we end up circling forever.
            // Indeed, YAHOO.util.History.navigate will call the module onStateChange
            // callback, which will call tabView.set, which will call this handler
            // and it keeps going from here...
            if (newState != currentState) {
                YAHOO.util.History.navigate("tabview", newState);
            }
        } catch (e) {
            tabView.set("activeIndex", newState.substr(3));
        }
    }

    function initTabView () {
        // Instantiate the TabView control...
        tabView = new YAHOO.widget.TabView("demo");
        tabView.addListener("activeTabChange", handleTabViewActiveTabChange);
    }

    // Use the Browser History Manager onReady method to initialize the application.
    YAHOO.util.History.onReady(function () {
        var currentState;

        currentState = YAHOO.util.History.getCurrentState("calendar");
        initCalendar({ pagedate: currentState.replace("_", "/") });

        initTabView();
        currentState = YAHOO.util.History.getCurrentState("tabview");
        tabView.set("activeIndex", currentState.substr(3));
    });

    // Initialize the browser history management library.
    try {
        YAHOO.util.History.initialize("yui-history-field", "yui-history-iframe");
    } catch (e) {
        // The only exception that gets thrown here is when the browser is
        // not supported (Opera, or not A-grade) Degrade gracefully.
        initCalendar({ pagedate: initialCalendarState.replace("_", "/") });
        initTabView();
    }

})();

</script>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>
